<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>

    </style>
</head>

<body>

    <!-- <div style="height: 2000px;"></div> -->
    <button>点击获取验证码</button>
    <p></p>

    <script>
        //   函数防抖和节流

        //  防抖 即每点一次就清一次计时器

        var t
        document.onclick = function () {
            clearTimeout(t)
            var t = setTimeout(function () {
                console.log(333);
            }, 1000)
        }

        // 节流 点击后，过一段时间，才能再次点击（在这段时间内，怎么点都没有用）

        // document.querySelector("button").onclick = function () {
        //     // count--
        //     document.querySelector("button").disabled = true;
        //     var count = 10;
        //     document.querySelector("p").innerHTML = `距离倒计时结束还有${count}秒`;

        //     var t = setInterval(function () {
        //         count--;
        //         document.querySelector("p").innerHTML = `距离倒计时结束还有${count}秒`;
        //         if (count <= 0) {
        //             clearInterval(t)
        //             document.querySelector("button").disabled = false;
        //             document.querySelector("p").innerHTML = "验证码是XXXX";
        //             document.querySelector("button").innerHTML = "点击再次获取验证码"
        //         }
        //     }, 1000)

        // }


        var flag = true;

        document.querySelector("button").onclick = function () {
            if (flag) {
                // 点击后，开始计时，此时的false保障了再怎么点都没有用
                flag = false;
                var count = 10;
                document.querySelector("p").innerHTML = `距离倒计时结束还有${count}秒`;
                var t = setInterval(function () {
                    count--;
                    document.querySelector("p").innerHTML = `距离倒计时结束还有${count}秒`;
                    if (count <= 0) {
                        // 当计时器清零时，true才能保证其再次被点击
                        flag = true;
                        clearInterval(t)
                        document.querySelector("p").innerHTML = "验证码是XXXX";
                        document.querySelector("button").innerHTML = "点击再次获取验证码"
                    }
                }, 1000)

            }
        }


        //   多元素绑定事件
        //   全选和反选
    </script>
</body>

</html>